<template>
  <div style="">
    <div class="flex flex-items-center">
      <el-input v-model="location.address" class="w400px!" clearable placeholder="请输入需要搜索的地址" @keydown.enter="selectAddress" />
      <div class="ml10px">
        纬度：
        <el-input v-model="location.lat" class="w140px!" disabled />
      </div>
      <div class="ml10px">
        经度：
        <el-input v-model="location.lng" class="w140px!" disabled />
      </div>
    </div>
    <div class="common-map-location" style="margin-top: 20px">
      <div id="container"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { jsonp } from 'vue-jsonp'
import { onMounted, computed } from 'vue'
const emit = defineEmits(['update:modelValue'])

const props = withDefaults(
  defineProps<{
    modelValue: {
      lat: number
      lng: number
      address: string
    }
  }>(),
  {}
)

const edit = () => {
  map.setCenter(new window.TMap.LatLng(location.value.lat, location.value.lng))
  markerLayer.updateGeometries([
    {
      styleId: 'marker',
      id: 'center',
      position: new window.TMap.LatLng(location.value.lat, location.value.lng),
    },
  ])
}

let markerLayer = {} as any
let map = {} as any
onMounted(async () => {
  initMap()
  getMarkerLayer()
  initPage()
})

const initPage = async () => {
  //初始化地图
  //绑定点击事件
  map.on('click', function (evt: any) {
    location.value.lat = evt.latLng.getLat().toFixed(6)
    location.value.lng = evt.latLng.getLng().toFixed(6)
    markerLayer.updateGeometries([
      {
        styleId: 'marker',
        id: 'center',
        position: new window.TMap.LatLng(location.value.lat, location.value.lng),
      },
    ])
    getAddress()
  })
}
const initMap = () => {
  const center = new window.TMap.LatLng(location.value.lat, location.value.lng) //设置中心点坐标
  map = new window.TMap.Map('container', {
    center: center,
    zoom: 14, // 设置地图缩放级别
  })
  map.willReadFrequently = true
}
// 点击地图获取地址
const getAddress = () => {
  const KEY = 'VKPBZ-JPRKP-FKMDH-VDVUZ-CEWNF-YOFD7'
  const SIG = 'EtHgXMT0nK3FwcY4D04lPlZWZYnwhNI'
  const url = 'https://apis.map.qq.com/ws/geocoder/v1'
  const get_poi = 0
  jsonp(url, {
    key: KEY,
    get_poi: get_poi,
    location: `${location.value.lat},${location.value.lng}`,
    sig: SIG,
    output: 'jsonp',
  })
    .then((res) => {
      location.value.address = res.result.address
    })
    .catch((err) => {
      console.log(err)
    })
}
// 输入地址获取经纬度
const selectAddress = () => {
  const KEY = 'VKPBZ-JPRKP-FKMDH-VDVUZ-CEWNF-YOFD7'
  const SIG = 'EtHgXMT0nK3FwcY4D04lPlZWZYnwhNI'
  const url = 'https://apis.map.qq.com/ws/geocoder/v1/'
  jsonp(url, {
    key: KEY,
    sig: SIG,
    address: location.value.address,
    output: 'jsonp',
  })
    .then(({ result }) => {
      location.value.lat = result.location.lat
      location.value.lng = result.location.lng
      //修改地图中心点
      map.setCenter(new window.TMap.LatLng(result.location.lat, result.location.lng))
      markerLayer.updateGeometries([
        {
          styleId: 'marker',
          id: 'center',
          position: new window.TMap.LatLng(result.location.lat, result.location.lng),
        },
      ])
    })
    .catch((err) => {
      console.log(err)
    })
}
const getMarkerLayer = () => {
  const markerGeo = {
    id: 'center',
    styleId: 'marker',
    position: map.getCenter(),
  }
  markerLayer = new window.TMap.MultiMarker({
    id: 'marker-layer', //图层唯一id
    map: map, //指定地图容器
    styles: {
      myStyle: new window.TMap.MarkerStyle({
        //
      }),
    },
    geometries: [markerGeo],
  })
}

const location = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  },
})

defineExpose({
  edit,
})
</script>
